<template>
	<view class="container">
		<view class="tabs">
			<scroll-view id="tab-bar" class="uni-swiper-tab font32">
				<view v-for="(tab,index) in tabBars" :key="index" class="swiper-tab-list" style="width: 50%;" :class="tabIndex==index ? 'active' : ''"
				 :data-current="index" @click="tapTab(index)">
					<view>{{tab.name}}</view>
				</view>
			</scroll-view>
		</view>
		<swiper :current="tabIndex" class="swiper-box" duration="300" @change="changeTab">
			<swiper-item class="swiperItem" v-for="(item,index) in tabBars" :key="index">
				<view class="buy_in" v-if="tabIndex == 0">
					<view class="form">
						<view class="price">
							<text class="font28">单价</text>
							<input type="number" placeholder-style="color: #cbcbda;" placeholder="请输入单价" value="" />
						</view>
						<view class="count">
							<text class="font28">数量</text>
							<input type="number" placeholder-style="color: #cbcbda;" placeholder="请输入交易数量" value="" />
						</view>
						<view class="lowest">
							<text class="font28">最低成交额</text>
							<input type="number" placeholder-style="color: #cbcbda;" placeholder="请输入最低成交额" value="" />
						</view>
						<view class="highest">
							<text class="font28">最高成交额</text>
							<input type="number" placeholder-style="color: #cbcbda;" placeholder="请输入最高成交额" value="" />
						</view>
					</view>
					<view class="btn_box m_t60">
						<button class="font30" type="primary">确定</button>
					</view>
				</view>
				<view class="buy_out" v-if="tabIndex == 1">
					<view class="form">
						<view class="price">
							<text class="font28">单价</text>
							<input type="number" placeholder-style="color: #cbcbda;" placeholder="请输入单价" value="" />
						</view>
						<view class="count">
							<text class="font28">数量</text>
							<input type="number" placeholder-style="color: #cbcbda;" placeholder="请输入交易数量" value="" />
						</view>
						<view class="lowest">
							<text class="font28">最低成交额</text>
							<input type="number" placeholder-style="color: #cbcbda;" placeholder="请输入最低成交额" value="" />
						</view>
						<view class="highest">
							<text class="font28">最高成交额</text>
							<input type="number" placeholder-style="color: #cbcbda;" placeholder="请输入最高成交额" value="" />
						</view>
					</view>
					<view class="btn_box m_t60">
						<button class="font30" type="primary">确定</button>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0, //tab下标
				tabBars: [{
					name: 'OTC买入',
					id: '1'
				}, {
					name: 'OTC卖出',
					id: '2'
				}],
			}
		},
		methods: {
			// 点击tab切换
			tapTab(index) {
				console.log('这是index下标', index);
				if (this.tabIndex === index) {
					return false;
				} else {
					this.tabIndex = index;
				}
			},
			//跟着切换
			changeTab(e) {
				console.log('这是e事件',e)
				let index = e.detail.current;
				this.tabIndex = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		overflow: hidden;
	}

	.container {
		display: flex;
		flex-direction: column;
		border-top: 1upx solid #EFEFF0;
	}

	.tabs {
		width: 100%;
		height: 100upx;

		.uni-swiper-tab {
			border-bottom: 0;
			display: flex;
			flex-direction: row;
			justify-content: space-around;

			.swiper-tab-list {
				width: 50%;
				background: #fff;
				display: inline-block !important;
				text-align: center;
				border-radius: 12upx;

			}

			.swiper-tab-list view {
				width: 50% !important;
				display: inline-block !important;
				height: 100upx;
				line-height: 100upx;
				box-sizing: border-box;
			}

			.active view {
				color: #5458B4;
				border-bottom: 4upx solid #6167e7;
			}
		}
	}

	.swiper-box {
		padding: 26upx 30upx;
		display: inline-block;
		background: #f8f8f8;
		// flex: 1 !important;
		height: 82vh !important;
		border-top: 1upx solid #EFEFF0;

		uni-swiper-item {
			overflow: auto;
		}
		.swiperItem {
			.buy_in,.buy_out {
				display: flex;
				flex-direction: column;
				.form {
					padding: 0 24upx;
					background: #fff;
					border-radius: 10upx;
					display: flex;
					flex-direction: column;
					.price,.count,.lowest,.highest {
						display: flex;
						align-items: center;
						padding: 30upx 0;
						border-bottom: 1upx solid #EFEFF0;
						text {
							width: 180upx;
							color: #393d51;
							margin-right: 30upx;
						}
					}
				}
				.btn_box {
					button {
						padding: 10upx 0;
						border: none;
						background: linear-gradient(left, #3e9dff, #5e60e8);
					}
					button::after {
						border: 0;
					}
				}
			}
		}
	}


	.uni-scroll-view {
		width: 80vw;
		height: 50vh !important;
		border-radius: 16px !important;
		background: #f2f3ff;
	}
</style>
